<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="searchForm.gender" placeholder="性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>

     

      <el-form-item label="入职日期从">
        <!-- 时间区间 -->
        <el-date-picker
          v-model="searchForm.entrydate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item> 

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 按钮 -->
    <el-row>
        <el-button type="primary" icon="el-icon-circle-plus-outline">新增员工</el-button>
        <el-button type="danger" icon="el-icon-delete">批量删除</el-button>
    </el-row>

    <!-- 表格 -->
    <el-table
    height="450px"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    :row-class-name="tableRowClassName"
     >
    <!-- 复选框 -->
     <el-table-column
      type="selection"
      width="55">
    </el-table-column>

    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="image"
      label="图像"
      width="180">
    </el-table-column>
    <el-table-column
      prop="gender"
      label="性别"
      width="140">
    </el-table-column>
    <el-table-column
      prop="job"
      label="职位"
      width="140">
    </el-table-column>

    <el-table-column
      prop="entrydate"
      label="入职日期"
      width="140">
    </el-table-column>
    <el-table-column
      prop="updatetime"
      label="最后操作时间"
      width="140">
    </el-table-column>
  
  <!-- 操作 -->
  <el-table-column label="操作">
    <!-- scope可以获得当期按钮所在行中的遍历的所有数据 -->
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>

</el-table>

    <!-- 分页条 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
        /* 搜索表单的数据 */
      searchForm: {
        name: "",
        gender: "",
        entrydate:[]
      },
      //表格数据
       tableData: [{
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:2,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:3,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       },
       {
        id:1,
        name:'zs',
        image:'1.jpg',
        gender:'男',
        job:'java',
        entrydate:'2019-01-01',
        updatetime:'2019-01-01'
       }],
       //复选框数据
       multipleSelection: [],
       //分页先关
       page:{
        pageSize:10,
        total:100,
        currentPage:1
       }


    };

  },
  methods: {
    //搜索表单
    onSubmit() {
      console.log("submit!");
      console.log(this.searchForm);
    },
    //表格变色
    tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 0) {  
          return 'warning-row';
        } else{
          return 'success-row';
        }
        return '';
      },
      //编辑
        handleEdit(row) {
        console.log(row);
      },
      //删除
      handleDelete(row) {
        console.log(row);
       
      },
      //复选框改变时触发的内容
        handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      //显示条数发生变化
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      //当前页发生变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }

  },
};
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>